<template>
	<view class="container">
		<image :src="url+'icon-13.png'" mode=""></image>
		<view class="title">本次考试您的得分：{{detail.score}}分</view>
		<view class="tips" v-if="detail.status==0">{{detail.isCertificate==0?'您已考试通过，获得考试证书':'请耐心等候批阅，批阅通过即可获得证书啦！'}}</view>
		<view class="see tips" v-if="detail.isCertificate==0" @tap="toSeecertificate">查看考试证书</view>
		<view class="tips" v-if="detail.status==3">{{detail.remainingNum?'请注意目前仅剩'+detail.remainingNum+'次考试机会了。':'很遗憾，目前无考试机会了'}} </view>
		<view class="Retake" @click="toPartExam" v-if="detail.status==3&&detail.remainingNum">再次考试</view>
		<view class="return" @tap="toReturn">返回</view>
	</view>
</template>

<script lang="ts" setup>
import {ref} from 'vue'
import {onLoad} from '@dcloudio/uni-app'
import api from '@/api'
const url = ref('https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/')  //图片前缀
onLoad((e)=>{
	examRecordId.value = e.examRecordId
	examId.value = e.examId
	getDetails()
})

const examRecordId = ref()
const detail = ref<detailType>({
	score:0,
	status:0,
	isCertificate:0,
	remainingNum:0,
	courseId:''
})
const examId = ref()
const getDetails = async() =>{
	const res: any = await api({
		method: 'get',
		url: `/mall/exam/exam-record/info/${examRecordId.value}`,
	})
	if(res){
		detail.value = res.data
	}
}
//重新考试
const toPartExam = ()=>{
	uni.redirectTo({
		url:`/pages/businessSchool/partExam/partExam?examId=${examId.value}`
	})
}

const toSeecertificate = () =>{
	uni.navigateTo({
		url:'/pages/share/workCode/index?type=4&id='+examRecordId.value
	})
}
const toReturn = ()=>{
	uni.redirectTo({
		url:`/pages/businessSchool/courseDetails/courseDetails?courseId=${detail.value.courseId}`
	})
}
interface detailType {
	score:number
	status:number
	remainingNum:number
	isCertificate:number
	courseId:string
}
</script>
<style>
	page{
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
.container{
	line-height: 1;
	@include flex(centet,center);
	flex-direction: column;
	padding:48rpx;
	box-sizing: border-box;
	image{
		width: 96rpx;
		height: 96rpx;
		margin: 0 auto;
	}
	.title{
		margin: 40rpx 0 0;
		font-weight: bold;
		font-size: 40rpx;
		color: #1B2120;
		text-align: center;
	}
	.tips{
		margin-top: 32rpx;
		line-height: 40rpx;
		text-align: center;
		font-size: 30rpx;
		color: #5C5E5E;
	}
	.Retake{
		width: 100%;
		height: 88rpx;
		font-size: 28rpx;
		color: #FFFFFF;
		margin-top:100rpx;
		background: linear-gradient( 90deg, #FF6188 0%, #FF5252 100%);
		border-radius: 44rpx;
		@include flex(center,center);
	}
	.return{
		width: 100%;
		height: 88rpx;
		font-size: 28rpx;
		color: #FF6084;
		margin-top: 32rpx;
		border: 2rpx solid #FF6084;
		border-radius: 44rpx;
		@include flex(center,center);
	}
}
</style>
